<template>
  <div class="contanier">
    <Hader title="确认订单" :isLeft="true" />
    <div class="tosts" v-show="msgModel"><i class="iconfont icon-laba"></i> 为了降低接触风险，可以修改下方备注<i class="iconfont icon-chahao" @click="closeMsg"></i></div>
    <!-- 收货地址 -->
    <div class="address">

      <div class="address-model">
        <div v-if="addAddress" @click="$router.push({path:'myAddress',query:{oldPath:'Settlement',addAddress:addAddress}})">
          <div style="line-height:.5rem;">{{addAddress.address}}</div>
          <div>{{addAddress.name}} <span>{{addAddress.phone}}</span></div>
        </div>

        <div v-else class="title" @click="add()">新增收货地址 <i class="iconfont icon-youjiantou"></i></div>

        <div class="message"> <i class="iconfont icon-yk_gantanhao"></i> 附近有多个地址不在配送范围内，请填写新地址</div>
        <div class="delivery">
          <div>立即送出</div>
          <div>约({{deliveryTime(orderInfo.shopInfo.order_lead_time)}}送达) <i class="iconfont icon-youjiantou"></i></div>
        </div>
        <div class="delivery">
          <div>支付方式</div>
          <div>支付宝<i class="iconfont icon-youjiantou"></i></div>
        </div>
      </div>
    </div>
    <!-- 购买商品详情 -->
    <div class="good-detail">
      <div class="box">
        <div class="title">来伊份(南京宝乐汇208C店)</div>
        <div class="good-list">
          <ul>
            <li v-for="(item,index) in orderInfo.selectFoods" :key="index">
              <div class="img"><img :src="item.image_path"></div>
              <div class="good-descrpse">
                <div>{{item.name}}</div>
                <div>x1</div>
              </div>
              <div class="price"> ¥{{item.activity.fixed_price}}</div>
            </li>
          </ul>
        </div>

        <!-- 配送红包 -->
        <div class="envelope">
          <div class="delivery">
            <span><span class="reduce">减</span><span class="delivery-title">配送费（蓝骑士转送）</span>
              <i class="iconfont icon-wenhao-copy"></i>
            </span>
            <span>¥0.5</span>
          </div>
          <div class="delivery delivery-price">
            <span>减5.0元配送费</span>
            <span class="relief">¥5.5元</span>
          </div>
          <div class="delivery margin">
            <span><span class="reduce">减</span><span class="delivery-title">满反红包</span></span>
            <span style="color:#fe5028;font-size:.35rem;">反满199减100店铺红包</span>
          </div>
          <div v-if="!addAddress" class="delivery margin">
            <span><span class="reduce">¥</span><span class="delivery-title">店铺红包</span></span>
            <span class="red-bao">新增地址后可选红包<i class="jiantou iconfont icon-youjiantou"></i></span>
          </div>
          <div v-if="!addAddress" class="delivery margin">
            <span><span class="reduce">¥</span><span class="delivery-title">平台红包</span></span>
            <span class="red-bao">新增地址后可选红包<i class="jiantou iconfont icon-youjiantou"></i></span>
          </div>
          <div v-if="!addAddress" class="delivery margin">
            <span><span class="reduce">¥</span><span class="delivery-title">配送费红包</span></span>
            <span class="red-bao">新增地址后可选红包<i class="jiantou iconfont icon-youjiantou"></i></span>
          </div>

          <div class="delivery" style="margin-top:.6rem;">
            <span><span class="delivery-title">优惠说明</span>
              <i style="margin-left:.1rem;" class="iconfont icon-wenhao-copy"></i>
            </span>
            <span style="font-size:.35rem;letter-spacing:.05rem;">
              <span>已优惠</span>
              <span style="color:#ff522a;">¥5</span>
              <span style="margin-left:.2rem;">小计¥{{allPrice}} </span>
            </span>
          </div>
        </div>
      </div>
      <Remake />
    </div>
    <div class="order-bottom">
      <div class="sum">合计：</div>
      <div class="price">
        <span>{{allPrice}}</span>
        <span>已优惠¥5</span>
      </div>
      <div @click="pay()">
        提交订单
      </div>
    </div>
  </div>
</template>
<script>
import Remake from '../order/Remake.vue'
import Hader from '../../components/Myheder.vue'
import { Toast } from "mint-ui";
export default {
  name: 'Settlement',
  data () {
    return {
      msgModel: true,
      orderInfo: this.$store.getters.orderInfo,
      addAddress: this.$store.getters.addAddress,
      allPrice: 0
    }
  },
  created () {
    this.orderInfo.selectFoods.forEach(item => {
      console.log(item.activity.fixed_price);
      this.allPrice += item.activity.fixed_price
    });

  },
  computed: {
  },
  methods: {
    closeMsg () {
      this.msgModel = false
    },
    add () {
      const isLogin = localStorage.getItem('userId')
      if (isLogin) {
        this.$router.push({ path: 'myAddress', query: { oldPath: 'Settlement' } })
        return
      } else {
        this.$router.push({ path: 'login', query: { oldPath: 'Settlement' } })
        return
      }


    },
    deliveryTime (time) {
      let date = new Date();
      date.setMinutes(date.getMinutes() + time);
      return date.getHours() + ":" + date.getMinutes();
    },
    pay () {
      if (this.addAddress == null) {
        Toast({
          message: "请选择收货地址",
          duration: 2000
        });
        return
      }
      this.$store.dispatch('addRemake', {
        tableware: this.$store.getters.addRemake.tableware,
        remark: this.$store.getters.addRemake.remark,
        price: this.allPrice
      })
      this.$router.push('/pay')
    }
  },
  components: {
    Hader,
    Remake

  }
}
</script>
<style  scoped>
.address {
  min-height: 4rem;
  background-color: #0593ed;
  background-image: linear-gradient(#0593ed, #e8f4f7);
  padding: 0.2rem;
}

.address-model {
  box-sizing: border-box;
  padding: 0.3rem;
  width: 100%;
  min-height: 100px;
  background-color: #fff;
  border-radius: 10px;
}
.address-model .title {
  font-size: 0.4rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  letter-spacing: 0.06rem;
}
.message {
  color: #f83f11;
  font-size: 0.1rem;
}
.address-model div {
  margin-bottom: 0.2rem;
}
.delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.delivery div {
  font-size: 0.25rem;
  font-weight: 550;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.contanier {
  position: relative;
}
.icon-youjiantou {
  float: right;
  color: #909192;
}
.icon-yk_gantanhao {
  font-size: 0.1rem;
}
.tosts {
  background-color: #fcf6e0;
  color: #e7ac16;
  font-size: 0.1rem;
  padding: 0.2rem;
  border-radius: 5px;
  /* margin-bottom: 10px; */
}
.icon-laba {
  font-size: 0.1rem;
}
.icon-chahao {
  font-size: 0.3rem;
  float: right;
  color: #666768 !important;
}
.good-detail {
  /* height: 60vh; */
  /* overflow: auto; */
  /* position: absolute; */
  /* top: 80%; */
  min-height: 300px;
  padding: 0.8rem 0.2rem;
  margin-top: -0.8rem;
}
.box {
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 10px;
}
.box .title {
  color: #707070;
  font-family: "黑体";
  font-size: 0.35rem;
  font-weight: 600;
}
.good-list {
  margin-top: 0.3rem;
}
.good-list ul li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}
.good-list ul li img {
  width: 100%;
  font-size: 0;
  vertical-align: middle;
}
.img {
  width: 15%;
  border: rgb(233, 231, 230) solid 0.05rem;
  border-radius: 0.2rem;
}
.good-descrpse {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: auto;
  margin-left: 0.2rem;
  width: 60%;
  padding: 0.1rem 0;

  text-align: left !important;
}
.good-descrpse div {
  font-size: 0.3rem;
}
.good-descrpse div:nth-child(1) {
  color: #2a2a2b;
  font-weight: 550;
  line-height: 0.45rem;
}
.good-descrpse div:nth-child(2) {
  color: #79797e;
}
.price {
  /* line-height: 1.5rem; */
  display: flex;
  align-items: center;
  color: #2a2a2b;
  font-weight: 550;
}
.envelope {
  margin-top: 0.5rem;
}
.reduce {
  display: inline-block;
  background-color: #ff522a;
  color: #fff;
  font-size: 0.1rem;
  padding: 0.1rem;
  border-radius: 0.1rem;
  height: 0.3rem;
  width: 0.3rem;
  text-align: center;
  line-height: 0.35rem;
}
.delivery-title {
  margin-left: 0.1rem;
  font-size: 0.2rem;
}
.icon-wenhao-copy {
  font-size: 0.1rem;
}
.delivery-price {
  color: #ff522a;
  font-size: 0.15rem;
  margin-top: 0.2rem;
}
.relief {
  text-decoration: line-through;
  color: #7c7c7c;
}
.margin {
  margin-top: 0.2rem;
}
.red-bao {
  display: inline-block;
  color: #ffffff;
  height: 0.2rem;
  line-height: 0.3rem;
  font-size: 0.1rem;
  background-color: #ff522a;
  padding: 0.2rem;
  border-radius: 0.2rem;
}
.jiantou {
  color: #fff !important;
}
.order-bottom {
  position: fixed;
  display: flex;
  width: 100%;
  bottom: 0rem;
  height: 1.3rem;
  background-color: #fff;
  z-index: 999;
  justify-content: space-around;
  align-items: center;
}
.order-bottom .price {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  width: 2rem;
  height: 100%;
  justify-content: space-evenly;
  font-size: 0.3rem;
  color: #ff522a;
}
.order-bottom .price span:nth-child(1) {
  font-size: 0.5rem;
}
.order-bottom div:nth-child(1) {
  width: 60%;
  text-align: right;
}
.order-bottom div:nth-child(3) {
  background-color: #01b6fb;
  color: #fff;
  font-family: "黑体";
  border-radius: 0.5rem;
  text-align: center;
  line-height: 1rem;
  height: 1rem;
  width: 20%;
  margin: 0.5rem;
  font-size: 0.4rem;
  padding: 0 0.5rem;
}
.sum {
  font-size: 0.1rem;
  height: 100%;
  margin-top: 0.5rem;
}
</style>  
